<template>
    <!-- 引入element中布局容器 -->
    <el-container style=" height:100% ">
        <el-aside width="auto">
            <!-- 使用组件 -->
            <course-aside></course-aside>
        </el-aside>
        <el-container>
            <el-header>
                <course-header></course-header>
            </el-header>
            <course-tab></course-tab>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>

</template>

<script>
    //引入组件
    import CourseAside from '../components/CourseAside.vue'
    import CourseHeader from '../components/CourseHeader.vue'
    import CourseTab from '../components/CourseTab.vue'
    export default {
        //注册组件
        components:{
            CourseAside,CourseHeader,CourseTab
        }
    }
</script>

<style>
    .el-aside{
        background-color: black;
    }
    .el-header{
        background-color: #269909;
    }
    /* .el-main{
        background-color: rgb(203, 197, 197);
    } */

</style>